<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-butterbar.html">
<link rel="import" href="../common/cr-button.html">
<link rel="import" href="../common/cr-dialog.html">
<link rel="import" href="../common/cr-toolbar.html">

<polymer-element name="cr-patchset-edit-dialog" attributes="patchset">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <link rel="stylesheet" href="../common/forms.css">

        <style>
            img {
                display: block;
            }

            .delete-action {
                flex: 1;
                display: -webkit-flex;
                display: flex;
                justify-content: flex-end;
                -webkit-justify-content: flex-end;
            }

            .delete-action > button {
                margin-right: 0;
            }

            .delete-confirmation {
                display: -webkit-flex;
                display: flex;
                align-items: center;
                -webkit-align-items: center;
                border: 1px solid #dcdcdc;
                margin-left: -1px;
            }

            .delete-confirmation div {
                display: -webkit-flex;
                display: flex;
                align-items: center;
                -webkit-align-items: center;
                margin: 0 16px;
            }

            .delete-confirmation button {
                height: 20px;
                margin-right: 16px;
            }
        </style>

        <dialog is="cr-dialog" id="dialog" on-cancel="{{ cancel }}">
            <cr-butterbar message="{{ butterbarMessage }}"></cr-butterbar>

            <h1>Edit patch {{ patchset.sequence }}</h1>

            <fieldset class="form-fields" disabled?="{{ sending }}">
                <div class="form-row">
                    <label class="form-label" for="title">Title</label>
                    <div class="form-field">
                        <input type="text" id="title" value="{{ title }}" autocomplete="off">
                    </div>
                </div>
            </fieldset>

            <cr-toolbar>
                <button is="cr-button" primary on-tap="{{ save }}">Save</button>
                <button is="cr-button" on-tap="{{ cancel }}">Cancel</button>
                <template if="{{ patchset.issue.patchsets.length > 1 }}">
                    <div class="delete-action">
                        <button is="cr-button" on-tap="{{ toggleDeleteAction }}" icon>
                            <img src="../images/delete_icon_36.png" height="25">
                        </button>
                        <template if="{{ showDeleteAction }}">
                            <div class="delete-confirmation">
                                <div>Permanently delete this patch?</div>
                                <button is="cr-button" create on-tap="{{ deletePatchset }}">Delete</button>
                                <button is="cr-button" on-tap="{{ toggleDeleteAction }}">No</button>
                            </div>
                        </template>
                    </div>
                </template>
            </cr-toolbar>
        </dialog>
    </template>
    <script>
        Polymer({
            created: function() {
                this.patchset = null;
                this.commit = true;
                this.butterbarMessage = "";
                this.sending = false;
                this.title = "";
                this.showDeleteAction = false;
            },
            toggleDeleteAction: function() {
                this.showDeleteAction = !this.showDeleteAction;
            },
            deletePatchset: function() {
                this.sending = true;
                this.patchset.delete()
                    .then(this.deleteSuccess.bind(this))
                    .catch(this.displayError.bind(this));
            },
            deleteSuccess: function() {
                this.fire("issue-refresh");
                this.close();
            },
            cancel: function(event) {
                this.close();
            },
            reset: function() {
                this.sending = false;
                this.butterbarMessage = "";
                this.commit = true;
                this.title = this.patchset ? this.patchset.title : "";
                this.showDeleteAction = false;
            },
            close: function() {
                this.reset();
                this.$.dialog.close();
            },
            save: function() {
                this.sending = true;
                this.butterbarMessage = "Saving...";
                this.patchset.setTitle(this.title)
                    .then(this.saveSuccess.bind(this))
                    .catch(this.displayError.bind(this));
            },
            saveSuccess: function() {
                this.close();
            },
            displayError: function(error) {
                // TODO(esprehn): We should show an better error message.
                this.sending = false;
                this.butterbarMessage = "Error: " + error.message;
            },
            showModal: function() {
                if (!this.patchset)
                    return;
                this.reset();
                this.$.dialog.showModal();
            },
        });
    </script>
</polymer-element>
